<template>
  <div class="app-container">
    <!--    <el-input v-model="user.name"></el-input>-->
    <!--    {{ user.name }}-->
    <!--    <el-radio-group v-model="user.gender">-->
    <!--      <el-radio :label="false">-->
    <!--        男-->
    <!--      </el-radio>-->
    <!--      <el-radio :label="true">-->
    <!--        女-->
    <!--      </el-radio>-->
    <!--    </el-radio-group>-->
    <!--    {{ user.gender }}-->
    <el-select v-model="search.choice" placeholder="搜索类型" clearable>
      <el-option value="name" label="姓名" />
      <el-option value="gender" label="性别" />
    </el-select>
    <br />
    <el-input v-if="search.choice === 'name'" v-model="search.query[search.choice]" placeholder="关键词" clearable />
    <el-radio-group v-else v-model="search.query[search.choice]">
      <el-radio :label="false">男</el-radio>
      <el-radio :label="true">女</el-radio>
    </el-radio-group>
    <br />
    {{ search }}
    <br />
    <el-button @click="changeInfo">Change Info</el-button>
    <br />
    {{ $store.state.account.info }}
    <br />
    {{ $store.getters['account/info'] }}
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { useStore } from 'vuex';

  export default defineComponent({
    name: 'ui',
    setup: () => {
      const store = useStore();
      const changeInfo = () => {
        store.commit('account/SET_INFO', {});
      };
      return {
        search: reactive({
          choice: null,
          query: {},
        }),
        changeInfo,
      };
    },
  });
</script>

<style scoped></style>
